<template>
  <div class="form-detail-con"
       :class="[type == 'table' ? 'table-detail-con' : '']">
    <template v-for="(item, index) in fieldList">
      <div class="item-con"
           :class="[`item-label-${labelPosition}`]"
           :style="{ '--column': item.column }"
           v-if="!item.hide"
           :key="index">
        <div class="label"
             :style="{ ...item.labelStyle, width: labelWidth }">
          {{ item.label ? (labelPosition === 'top' ? item.label : `${item.label}${showSuffix ? '：' : ''}`) : '' }}
        </div>
        <div class="value"
             :class="item.toggleValue ? 'toggleClass' : ''"
             v-if="!item.slotName">
          <!-- 字典类型 -->
          <DictLabel :fieldValue="model[item.key]"
                     v-bind="item.props"
                     v-if="item.type === 'select' && model[item.key]"></DictLabel>
          <div v-else-if="item.type === 'select'">- -</div>

          <div v-else-if="item.type === 'upload' && model[item.key] && (!model[item.key].length || !model[item.key][0].url)"
               class="upload-default">
            <img src="../../assets/images/upload-default-img.png" />
          </div>
          <uploadFile v-model="model[item.key]"
                      v-bind="item.props"
                      v-else-if="item.type === 'upload'"
                      :disabled="true"></uploadFile>

          <div v-html="model[item.key]"
               v-else-if="item.type === 'editor'"></div>
          <div v-else-if="item.toggleValue && model[item.key]"
               class="wrapper">
            <input :id="item.key"
                   class="exp"
                   type="checkbox" />
            <div v-bind="item.props"
                 class="text">
              <label class="btn"
                     :for="item.key"></label>
              {{ model[item.key] || '- -' }}
            </div>
          </div>

          <div v-else
               v-bind="item.props">
            {{ model[item.key] || '- -' }}
          </div>
        </div>
        <div class="value"
             v-else>
          <slot :name="item.slotName"
                :item="{ ...item, value: model[item.key] }"></slot>
        </div>
      </div>
    </template>
  </div>
</template>


<script>
import DictLabel from './DictLabel'
import uploadFile from '@/components/UploadFile/Index'
export default {
  name: 'index',
  components: {
    DictLabel,
    uploadFile,
  },
  props: {
    fieldList: {
      type: Array,
      default: () => [],
    } /**
     字段数组 {
              label: '字段的label',key: '字段',
              type: '字段类型 默认是直接显示字段值，select 字典可用，',
              props: '值组件的属性，如type 为 select 时，props 为 {dictCode: '字典类型值',}。如 type 为 upload 时，为 上传组件 UploadFile', 如 type 为 editor 时，为 富文本展示形式',
              hide: '是否隐藏该字段， 默认不传，即为显示'，
              column: 2 单个字段占的列数，
              slotName: '单个字段的值支持slot'，
              labelStyle: 'label 的样式'，
              toggleValue:  true/false 是否折叠过长的value值
            }
     */,
    // 字段值
    model: {
      type: Object,
      default: {},
    },
    // 是否展示label后的：
    showSuffix: {
      type: Boolean,
      default: true,
    },
    // 文字方向
    labelPosition: {
      type: String,
      values: ['left', 'right', 'top'],
      default: 'right',
    },
    // 详情的类型 form/table
    type: {
      type: String,
      default: 'form',
    },
    // label文字宽度
    labelWidth: {
      type: String,
      default: '',
    },
    // 空数据展示
    emptyText: {
      type: String,
      default: '',
    }
  },
}
</script>

<style scoped lang="scss">
.form-detail-con {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  --column: 2;
  gap: 16px;
  .item-con {
    width: calc((100% - (16px * (var(--column) - 1))) / var(--column));
    display: flex;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 0px;
    .label {
      width: var(--label-width);
      min-width: var(--label-width);
      text-align: right;
      margin-right: 8px;
      color: #757778;
      font-weight: 400;
      word-wrap: break-word;
    }
    .value {
      flex: 1;
      color: #2d2d2e;
      font-weight: 400;
      overflow-x: hidden;
      word-wrap: break-word;
    }
  }
  .item-label-left {
    .label {
      text-align: left;
    }
  }
  .item-label-top {
    display: block;
    margin-bottom: 8px;
    .label {
      width: 100%;
      text-align: left;
      margin-right: 0px;
    }
    .value {
      margin-top: 6px;
      &.toggleClass {
        .wrapper {
          display: flex;
          overflow: hidden;
        }
        .text {
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: justify;
          /* display: flex; */
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          position: relative;

          &::before {
            content: "";
            height: calc(100% - 20px);
            float: right;
          }
          &::after {
            content: "";
            width: 999vw;
            height: 999vw;
            position: absolute;
            margin-left: -100px;
            box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #f7f9fa;
          }
        }

        .btn {
          float: right;
          clear: both;
          color: #1989fa;
          cursor: pointer;
          &::before {
            content: "更多";
          }
        }
        .exp {
          display: none;
        }
        .exp:checked + .text {
          -webkit-line-clamp: 999;
        }
        .exp:checked + .text::after {
          visibility: hidden;
        }
        .exp:checked + .text .btn::before {
          content: "收起";
        }
      }
    }
  }
}
.upload-default {
  width: 104px;
  height: 104px;
}
.table-detail-con {
  gap: 0;
  .item-con {
    width: calc((100% / var(--column)));
  }
  .label {
    display: flex;
    align-items: center;
    padding: 9px 0 9px 16px;
    background: #f1f4f6;
    font-family: PingFangSC, PingFang SC;
    // font-weight: bold !important;
    font-size: 14px;
    color: #121314 !important;
    margin-right: 0 !important;
    border-right: 1px solid #e4e9ed;
    border-bottom: 1px solid #e4e9ed;
  }
  .value {
    font-size: 14px;
    color: #2d2d2e;
    padding: 9px 0 9px 16px;
    border-right: 1px solid #e4e9ed;
    border-bottom: 1px solid #e4e9ed;

    ::v-deep .component-upload-image {
      height: 104px;
    }
    ::v-deep .el-upload-list--picture-card {
      .el-upload-list__item {
        width: 104px !important;
        height: 104px !important;
        margin-bottom: 0px;
      }
    }
  }
}
</style>
